<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">

    <title></title>

</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
<script src="./js/holder.js@2.9.7/holder.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->
<script>

    //获得请求参数
    let url=location.href;
    let index=url.search("=");
    let id=url.substring(index+1);

    fetch("queryid.product?id="+id).then(response=>response.json()).then(data=>{
        let productDiv=document.getElementById("productDiv");
        let p=data.data;
        let content=` <!-- 面包屑导航 -->
                        <div class="row justify-content-center mt-1">
                            <div class="col-9 " style="background-color: #ccc">
                                <nav aria-label="breadcrumb" class="mt-1">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Library</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <!-- /面包屑导航 -->


                        <div class="row justify-content-center mt-3">
                            <div class="col-9">
                                <!-- 分为两个部分 -->
                                <div class="row">
                                    <div class="col-5" style="padding-left: 0%;">
                                        <img src="${p.pimage}">
                                    </div>
                                    <div class="col-7 ">
                                        <div>
                                            <span>${p.name}<small>建议价格￥${p.shopPrice} 市场价格￥${p.marketprice}</small></span>
                                        </div>
                                        <!-- 修改数量 -->
                                        <div class="card mb-3" style="max-width: 540px;">
                                            <div class="row g-0">
                                                <div class="col-md-4 text-end" style="font-size: 15px; ">
                                                    <div style="padding-right: 30px; padding-top: 50px;">修改数量</div>
                                                </div>
                                                <div class="col-md-8">
                                                    <div class="card-body">

                                                        <p class="card-text">
                                                        <div class="input-group mb-3">
                                                            <button class="btn btn-outline-secondary" type="button"
                                                                    id="button-addon1">-
                                                            </button>
                                                            <input type="text" class="form-control" placeholder=""
                                                                   aria-label="Example text with button addon"
                                                                   aria-describedby="button-addon1" id="qtyInput">
                                                            <button class="btn btn-outline-secondary" type="button"
                                                                    id="button-addon2">+
                                                            </button>
                                                        </div>
                                                        </p>

                                                        <p class="card-text">
                                                            <a class="btn btn-outline-secondary" type="button"
                                                               id="button-addon1"  onclick="addCart(${p.id})">添加购物车</a>
                                                            <a class="btn btn-outline-secondary" type="button"
                                                               id="button-addon1">收藏</a>
                                                        </p>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /修改数量 -->
                                    </div>
                                </div>
                                <!-- 分为两个部分 -->
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-9">
                                <p class="mt-1" style="font-size: 1.2rem;text-align: center;">商品描述</p>
                                <p style="text-align: center">
                                           ${p.desc}
                                </p>
                            </div>
                        </div>`;
        productDiv.innerHTML=content;
    });

    let addCart=(pid)=>{
        //获得文本框中的值
        let qtyInput=document.getElementById("qtyInput");
        let qty=qtyInput.value;
        //发送异步请求
        fetch(`add.cart?id=${pid}&qty=${qty}`).then(response=>response.json()).then(data=>{


            if(data.flag){
               var toasLiveExample=document.getElementById("liveToast");
               var toast=new bootstrap.Toast(toasLiveExample);
               let toasBody=document.querySelector("#liveToast,toast-body");
               toasBody.innerHTML=data.message;
               toast.show();
           }
        })
    };
</script>

        <div class="container" id="productDiv">
            <!--此处优化商品展示-->
        </div>

            <!--//消息框-->
        <div class="position-absolute top-50 start-50 translate-middle-x">
            <div id="liveToast" data-bs-delay="1500" class="toast text-white bg-success by-opacity-75" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">

                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 mt-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        </div>

    </body>

</html>